﻿@page "/components/loading"

<PageOutlet Url="components/loading"
            Title="Loading"
            Description="loading component of the bit BlazorUI components" />

<DemoPage Name="Loading"
          Description="Native loading components with beautiful visuals ready to use in any waiting scenario."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          GitHubUrl="Progress/Loading/Base/BitLoading.razor"
          GitHubDemoUrl="Progress/Loading/BitLoadingDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div class="container">
            <div class="wrapper">
                <div>BitBarsLoading</div>
                <BitBarsLoading />
            </div>
            <div class="wrapper">
                <div>BitCircleLoading</div>
                <BitCircleLoading />
            </div>
            <div class="wrapper">
                <div>BitDotsRingLoading</div>
                <BitDotsRingLoading />
            </div>
            <div class="wrapper">
                <div>BitDualRingLoading</div>
                <BitDualRingLoading />
            </div>
            <div class="wrapper">
                <div>BitEllipsisLoading</div>
                <BitEllipsisLoading />
            </div>
            <div class="wrapper">
                <div>BitGridLoading</div>
                <BitGridLoading />
            </div>
            <div class="wrapper">
                <div>BitHeartLoading</div>
                <BitHeartLoading />
            </div>
            <div class="wrapper">
                <div>BitHourglassLoading</div>
                <BitHourglassLoading />
            </div>
            <div class="wrapper">
                <div>BitRingLoading</div>
                <BitRingLoading />
            </div>
            <div class="wrapper">
                <div>BitRippleLoading</div>
                <BitRippleLoading />
            </div>
            <div class="wrapper">
                <div>BitRollerLoading</div>
                <BitRollerLoading />
            </div>
            <div class="wrapper">
                <div>BitSpinnerLoading</div>
                <BitSpinnerLoading />
            </div>
            <div class="wrapper">
                <div>BitXboxLoading</div>
                <BitXboxLoading />
            </div>
            <div class="wrapper">
                <div>BitSlickBarsLoading</div>
                <BitSlickBarsLoading />
            </div>
            <div class="wrapper">
                <div>BitBouncingDotsLoading</div>
                <BitBouncingDotsLoading />
            </div>
            <div class="wrapper">
                <div>BitRollingDashesLoading</div>
                <BitRollingDashesLoading />
            </div>
            <div class="wrapper">
                <div>BitOrbitingDotsLoading</div>
                <BitOrbitingDotsLoading />
            </div>
            <div class="wrapper">
                <div>BitRollingSquareLoading</div>
                <BitRollingSquareLoading />
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Label" RazorCode="@example2RazorCode" Id="example2">
        <BitGridLoading Label="Loading" />
    </DemoExample>

    <DemoExample Title="LabelPosition" RazorCode="@example3RazorCode" Id="example3">
        <div class="container">
            <div class="wrapper">
                <BitDotsRingLoading Label="Top" LabelPosition="BitLabelPosition.Top" />
            </div>
            <div class="wrapper">
                <BitDotsRingLoading Label="Bottom" LabelPosition="BitLabelPosition.Bottom" />
            </div>
            <div class="wrapper">
                <BitDotsRingLoading Label="Start" LabelPosition="BitLabelPosition.Start" />
            </div>
            <div class="wrapper">
                <BitDotsRingLoading Label="End" LabelPosition="BitLabelPosition.End" />
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="LabelTemplate" RazorCode="@example4RazorCode" Id="example4">
        <BitEllipsisLoading>
            <LabelTemplate>
                <div style="color:green"><b>Loading</b></div>
            </LabelTemplate>
        </BitEllipsisLoading>
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example5RazorCode" Id="example5">
        <div class="container">
            <div class="wrapper">
                <BitBarsLoading Label="Primary" Color="BitColor.Primary" />
            </div>
            <div class="wrapper">
                <BitCircleLoading Label="Secondary" Color="BitColor.Secondary" />
            </div>
            <div class="wrapper">
                <BitDotsRingLoading Label="Tertiary" Color="BitColor.Tertiary" />
            </div>
            <div class="wrapper">
                <BitDualRingLoading Label="Info" Color="BitColor.Info" />
            </div>
            <div class="wrapper">
                <BitEllipsisLoading Label="Success" Color="BitColor.Success" />
            </div>
            <div class="wrapper">
                <BitGridLoading Label="Warning" Color="BitColor.Warning" />
            </div>
            <div class="wrapper">
                <BitHeartLoading Label="SevereWarning" Color="BitColor.SevereWarning" />
            </div>
            <div class="wrapper">
                <BitHourglassLoading Label="Error" Color="BitColor.Error" />
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Custom Color" RazorCode="@example6RazorCode" Id="example6">
        <div class="container">
            <div class="wrapper">
                <BitBarsLoading Label="brown" CustomColor="brown" />
            </div>
            <div class="wrapper">
                <BitCircleLoading Label="rgb(0 107 185 / 75%)" CustomColor="rgb(0 107 185 / 75%)" />
            </div>
            <div class="wrapper">
                <BitDotsRingLoading Label="#426985" CustomColor="#426985" />
            </div>
            <div class="wrapper">
                <BitDualRingLoading Label="hsl(106 100% 22% / 1)" CustomColor="hsl(106 100% 22% / 1)" />
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example7RazorCode" Id="example7">
        <div class="container">
            <div class="wrapper">
                <BitXboxLoading Label="Small" Size="BitSize.Small" />
            </div>
            <div class="wrapper">
                <BitXboxLoading Label="Medium" Size="BitSize.Medium" />
            </div>
            <div class="wrapper">
                <BitXboxLoading Label="Large" Size="BitSize.Large" />
            </div>
            <div class="wrapper">
                <BitXboxLoading Label="Custom (128)" CustomSize="128" />
            </div>
        </div>
    </DemoExample>
</DemoPage>
